<div class="flex justify-center opacity-{{ include.opacity }} z-{{ include.opacity }} {{ include.pos }} transition duration-500" id="{{ include.id }}">
    <div class="w-1/3 mr-4 flex flex-col justify-center">
       <div class="flex flex-col text-2xl">
            <div class="font-semibold">{{include.title}}</div>
            <div>{{include.subTitle}}</div>
       </div>
       <div class="my-20 text-6xl">
            <p>
                {{ include.p1 }}
                <span class="font-semibold">{{ include.boldText }}</span>
                {{ include.p2 }}
            </p>
       </div>
       <div class="flex text-lg space-x-64">
            <div class="hover:underline cursor-pointer">READ THE FULL STORY</div>
            <div class="flex">
                <div class="mr-4 hover:underline cursor-pointer" onclick="{{ include.clicked }}">SEE NEXT</div>
                <div>0{{ include.nr }} / 03</div>
            </div>      
       </div>
    </div>
    <div class="w-3/12 relative">
        <img src="../assets/home-page/images/personas/{{ include.id }}.jpg" alt="" class="z-10">
        <div class="absolute z-20 w-36 bottom-1/2 left-3/4 cursor-pointer">
            <svg viewBox="0 0 128 16" class="personastyles__ArrowIcon-sc-1ce6ucj-14 dJJqCz" onclick="{{ include.clicked }}">
                <line stroke="currentColor" stroke-width="2" x1="0" x2="127" y1="8" y2="8">
                </line>
                <polyline fill="none" points="120,1 127,8 120,15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                </polyline>
            </svg>
        </div>
    </div>
</div>

<style>
    #{{ include.id }}{
        background-color: {{ include.color }};   
    }
</style>
